<script setup>
import TraditionalComp from './components/TraditionalComp.vue';
import HookComp from './components/HookComp.vue';
import HookBusinessComp from './components/HookBusinessComp.vue';
</script>

<template>
  <header>
    <img class="logo" src="./assets/logo.svg" />
    Hello VUE@3.0
  </header>
  <TraditionalComp title="传统组件" />
  <div class="cutline" />
  <HookComp title="Hook组件" />
  <div class="cutline" />
  <HookBusinessComp title="Hook版本的业务" />
</template>

<style scoped>
header {
  height: 60px; line-height: 60px; font-size: 16px; padding: 0 20px;
  border-bottom: 1px solid rgba(0, 0, 0, .4);
}
img { 
  height: 40px; float: left; margin: 10px 10px 10px 0;
}
.cutline{
  height: 1px; background: rgba(0, 0, 0, .4);
}

</style>
